<template>
    <div class="waybillDetailwrap">
        <!-- <div class="titAddress">
            <p>起点: <span>上海市 浦东新区</span></p>
            <p>终点: <span>乌鲁木齐市 昌吉回族自治区</span></p>
        </div> -->
        <div class="waybillInfo">
            <div class="titleH3">
                <i></i>
                <h3>运单信息</h3>
                <div class="phoneIcon" @click="showPhone = true"></div>
            </div>
            <ul>
                <li><b>运单号</b>：<span>{{waybillInfo.transBillId}}</span></li>
                <li><b>运单日期</b>：<span>{{waybillInfo.transBillDate}}</span></li>
                <li><b>运单状态</b>：<span>{{waybillInfo.transBillStatusName}}</span></li>
                <li><b>运输方式</b>：<span>{{waybillInfo.transTypeName}}</span></li>
                <li><b>报价方式</b>：<span>{{waybillInfo.quoteType | quoteTypeName}}</span></li>
                <li><b>运输总量</b>：<i>{{(waybillInfo.transWeight*1).toFixed(3)}}</i><span>吨</span></li>
                <li><b>期望价格</b>：<i>{{(waybillInfo.transPrice*1).toFixed(2)}}</i><span>元/吨（含税）</span></li>
                <li><b>运费包含</b>：<span>{{waybillInfo.feeName}}</span></li>
                <li><b>预计杂费</b>：<i>{{(waybillInfo.otherAmount*1).toFixed(2)}}</i><span>元（税率：{{waybillInfo.feeTaxRate*100}}%）</span></li>
                <li><b>运输要求</b>：<span>{{waybillInfo.transRequest}}</span></li>
            </ul>
        </div>
        <div class="lineInfo">
            <div class="lineSing" v-for='(item,index) in transportD'>
                <div class="titleH3">
                    <i></i>
                    <h3>线路{{index+1}}</h3>
                </div>
                <ul>
                    <li><i>起点</i>：<span>{{item.beginSiteProvince}}</span></li>
                    <li><i>终点</i>：<span>{{item.endSiteProvince}}</span></li>
                    <li><i>提货点</i>：<span style="line-height:24px;">{{item.beginSiteStorage}}（{{item.beginSiteAddr}}）</span></li>
                    <li><i>联系人</i>：<span>{{item.beginSiteContract}}  {{item.beginSitePhone}}</span></li>
                    <li><i>提货时间</i>：<span>{{item.pickupTime}}</span></li>
                    <li><i>卸货点</i>：<span style="line-height:24px;">{{item.endSiteStorage}}  {{item.endSiteAddr}}</span></li>
                    <li><i>联系人</i>：<span>{{item.endSiteContract}}   {{item.endSitePhone}}</span></li>
                    <li><i>卸货时间</i>：<span>{{item.deliveryTime}}</span></li>
                    <li><i>货物信息</i>：<span class="goodsSpan">{{item.productTypeNameByApp}} {{((item.totalGoodsWeightByApp || 0)*1).toFixed(3)}}吨 {{item.totalGoodsCountByApp}}件</span><a class="fr" href="javascript:;" @click='showGoods(item.transportGoodsVo)'>查看详情</a></li>
                    <li class="clearfix">
                        <div class="fl ">
                            <span class="disIcon"></span>
                          <span class="dispathInfoTit">调度信息</span>
                        </div>
                    </li>
                </ul>
                <ul class="dispatchInfoList">
                    <li v-for='(d,i) in item.tspDispatch'>
                        <span>{{d.vehicleNum}}</span>
                        <span>{{d.driverUserName}}</span>
                        <span>{{d.driverPhone}}</span>
                        <span>{{(d.dispatchWeight*1).toFixed(3)}}吨</span>
                        <span><a href="javascript:;" @click='queryReceiptInfo(d.dispatchId)'>查看</a></span>
                    </li>
                </ul>
            </div>
        </div>
        <mt-popup v-model="popupVisible" popup-transition="popup-fade">
            <mt-PopupTable :transportGoodsVo="transportGoodsVo"></mt-PopupTable>
        </mt-popup>
        <!-- 回单信息 -->
        <mt-popup v-model="receiptInfo" popup-transition="popup-fade">
                    <div class="receiptInfoWrap">
                        <div class="head">
                            <h3>回单信息</h3>
                            <span @click='receiptInfo = false'>×</span>
                        </div>
                        <ul class="info">
                            <li>
                                <span>回单吨位：</span>
                                <i>{{(actDispatchWeight*1).toFixed(3)}}吨</i>
                            </li>
                            <li>
                                <span>回单件数：</span>
                                <i>{{actDispatchCount}}件</i>
                            </li>
                            <li>
                                <span>实际杂费：</span>
                                <i>{{(otherFee*1).toFixed(2)}}元</i>
                            </li>
                        </ul>
                        <div class="imgShow">
                            <h3>装卸货图片</h3>
                            <ul class="imgGroup clearfix">
                                <li  v-for="(item, index) in stevedores">
                                    <img class="wc-preview-img"  :src="item.attachmentUrl" @click="appShowImg($event, imgStevedores,index)">
                                </li>

                            </ul>
                             <h3>签收单图片</h3>
                            <ul class="imgGroup clearfix">
                                <li  v-for="(item, index) in attachment">
                                    <img class="wc-preview-img" :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgAttachment,index)">
                                </li>

                            </ul>
                             <h3>杂费发票图片</h3>
                            <ul class="imgGroup clearfix">
                                <li v-for="(item, index) in attachmentInvoice">
                                    <img class="wc-preview-img" :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgInvoice,index)">
                                </li>
                            </ul>
                        </div>
                    </div>
                </mt-popup>
                <mt-popup v-model="showPhone" popup-transition="popup-fade" class="pup">
                  <div class="phonePopup">
                    <div class="top">
                       <div class="pre"></div>
                       <div class="closed" @click="showPhone = false"></div>
                    </div>
                    <div class="bottom">
                      <p class="name">姓名: {{waybillInfo.businessUserName}}</p>
                      <p class="phoneCode">{{waybillInfo.businessUserCode | phoneCode}}</p>
                      <div class="icon" @click="call"></div>
                    </div>
                    <!-- <div class="top">
                      <div>
                        <span>姓名 : </span>
                        <i>{{waybillInfo.businessUserName}}</i>
                      </div>
                      <div>
                        <span>电话 : </span>
                        <span>{{waybillInfo.businessUserCode}}</span>
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="" @click="showPhone = false">取消</div>
                      <div class=""><a href="javascript:;" @click="call">呼叫</a></div>
                    </div> -->
                  </div>
                </mt-popup>
        <!-- <div class="needsclickWrap">
            <mt-button :disabled="disabled" class='btn needsclick' type="primary" size="large" @click.native='toOffer'>我要报价</mt-button>
        </div> -->
        <!-- 底部打开日期 -->
        <mt-datetime-picker
        ref="startPicker"
        type="datetime"
        v-model="startPickerValue"
        @confirm="start">
      </mt-datetime-picker>
      <mt-datetime-picker
        ref="endPicker"
        type="datetime"
        v-model="endPickerValue"
        @confirm="end">
      </mt-datetime-picker>
    </div>
</template>
<script type="text/ecmascript-6">
import ApiService from "@/services/API-servies";
import {
  Tabbar,
  TabItem,
  Cell,
  TabContainer,
  TabContainerItem,
  Button,
  Popup,
  DatetimePicker
} from "mint-ui";
import MTabbar from "../foot/Tabbarfoot";
import PopupTable from "../public/popupTable";
export default {
  created() {
    this.getDetail();
  },
  data() {
    return {
      waybillInfo: {
        transBillId: "",
        transBillDate: "",
        transBillStatusName: "",
        transTypeName: "",
        transWeight: "",
        otherAmount: "",
        transRequest: "",
        feeName: "",
        transAmount: "",
        transPrice: "",
        quoteType: "",
        feeTaxRate: 0.11,
        businessUserCode: "",
        businessUserName: ""
      },
      offerForm: {
        transBillId: "",
        quotationPrice: "",
        pickupTime: "",
        deliveryTime: ""
      },
      transportD: [],
      transportGoodsVo: [],
      popupVisible: false,
      popupVisible2: false,
      startPickerValue: new Date(),
      endPickerValue: new Date(),
      transBillStatus: "",
      disabled: true,
      selected: "a",
      receiptInfo: false,
      actDispatchWeight: "0.00",
      actDispatchCount: "0",
      otherFee: "",
      attachment: [],
      attachmentInvoice: [],
      stevedores: [],
      imgStevedores: [],
      imgInvoice: [],
      imgAttachment: [],
      showPhone: false
      // setTransportStatus:''
    };
  },
  mounted() {
    setTimeout(() => {
      if (this.$isBrower.isAndroid) {
      } else if (this.$isBrower.isIos) {
        this.setIosTitleType();
      }
    }, 0);
  },
  methods: {
    toOffer() {
      this.popupVisible2 = true;
    },
    getDetail() {
      // this.setTransportStatus = this.$route.query.setTransportStatus;
      let transBillId = this.$route.query.transBillId;
      this.offerForm.transBillId = transBillId;
      ApiService.transport
        .detail({
          transBillId: transBillId
        })
        .then(res => {
          if (res.meta.retCode === "0") {
            this.assign(res.data);
          }
        });
    },
    assign(data) {
      for (let item in this.waybillInfo) {
        this.waybillInfo[item] = data[item];
      }
      this.transportD = data.transportD;
      this.transBillStatus = data.transBillStatus;
    },
    showGoods(transportGoodsVo) {
      this.popupVisible = true;
      this.transportGoodsVo = transportGoodsVo;
    },
    openStartPicker() {
      this.$refs.startPicker.open();
    },
    openEndPicker() {
      this.$refs.endPicker.open();
    },
    start(value) {
      let start = this.$moment(value).format("YYYY-MM-DD HH:mm");
      this.offerForm.pickupTime = start;
    },
    end(value) {
      let end = this.$moment(value).format("YYYY-MM-DD HH:mm");
      this.offerForm.deliveryTime = end;
    },
    submitOffer() {
      let offerForm = JSON.stringify(this.offerForm);
      ApiService.quotation.offer(this.offerForm).then(res => {
        console.log(res);
      });
    },
    //ios 设置头部信息
    setIosTitleType() {
      let params = {
        isReturn: true,
        isSearch: false,
        isTitleSegment: false
      };
      this.$bridge.callhandler("needBarButton", params, data => {});
    },
    queryReceiptInfo(dispatchId) {
      ApiService.receipt
        .tspDispatchDetail({
          dispatchId: dispatchId
        })
        .then(res => {
          if (res.meta.retCode != "0") {
            return;
          }
          var _dispach = res.data;
          this.actDispatchWeight = _dispach.actDispatchWeight;
          this.actDispatchCount = _dispach.actDispatchCount;
          this.otherFee = _dispach.otherFee;
          this.attachment = _dispach.attachment;
          this.attachmentInvoice = _dispach.attachmentInvoice;
          this.stevedores = _dispach.stevedores;

          this.imgStevedores = [];
          for (var i = this.stevedores.length - 1; i >= 0; i--) {
            this.imgStevedores.push(this.stevedores[i].attachmentUrl);
          }
          this.imgInvoice = [];
          this.imgAttachment = [];
          for (var i = this.attachmentInvoice.length - 1; i >= 0; i--) {
            this.imgInvoice.push(this.attachmentInvoice[i].attachmentUrl);
          }
          for (var i = this.attachment.length - 1; i >= 0; i--) {
            this.imgAttachment.push(this.attachment[i].attachmentUrl);
          }
        });
      this.receiptInfo = true;
    },
    appShowImg($event, list, index) {
      let params = {
        currentIndex: index,
        pickerList: list
      };
      if (this.$isBrower.isIos) {
        this.$bridge.callhandler("LookBigPictureAction", params, data => {});
      }
      if (this.$isBrower.isAndroid) {
        app.showImg(params);
      }
    },
    call() {
      if (this.$isBrower.isAndroid) {
        app.makePhone({ phone: this.waybillInfo.businessUserCode });
      } else if (this.$isBrower.isIos) {
        let params = {
          phone: this.waybillInfo.businessUserCode
        };
        this.$bridge.callhandler("makePhone", params, data => {});
      }
      // 13453806020
    }
  },
  filters: {
    quoteTypeName(val) {
      if (val == 10) {
        return "总价";
      } else if (val == 20) {
        return "单价";
      }
    },
    phoneCode(val) {
      // return val.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ")
            var value = val;
            value = value.replace(/\s*/g, "");
            var result = [];
            for(var i = 0; i < value.length; i++)
            {
                if (i==3||i==7)
                {
                    result.push(" " + value.charAt(i));
                }
                else
                {
                    result.push(value.charAt(i));
                }
            }
            return result.join("");
    }
  },
  watch: {
    /*transBillStatus:function(val, oldVal){
            if(val == 40){
                this.disabled = false;
            }
        },*/
  },
  components: {
    MtTabbar: Tabbar,
    MtTabItem: TabItem,
    mtCell: Cell,
    MtTabContainer: TabContainer,
    MtTabContainerItem: TabContainerItem,
    MTabbar,
    MtButton: Button,
    MtPopup: Popup,
    MtPopupTable: PopupTable,
    MtDatetimePicker: DatetimePicker
  }
};
</script>

<style scoped lang="less" rel="stylesheet/less">
@import "~common/less/variable";
@import "~common/less/modules/waybillDetail.less";
@import "~common/less/modules/public.less";
.waybillDetailwrap {
  .waybillInfo {
    & > .titleH3 {
      position: relative;
      .phoneIcon {
        position: absolute;
        right: 40px;
        top: 20px;
        width: 80px;
        height: 80px;
        background: url(~common/imgs/phoneIcon.jpg) no-repeat;
        background-size: cover;
      }
    }
  }
  .mint-popup {
    overflow-y: auto;
  }
  i,
  span {
    font-weight: 400;
  }
  i,
  b {
    text-align: justify;
    text-align-last: justify;
    line-height: 0;
  }
  b div {
    display: inline-block;
    width: 100%;
    height: 0;
    margin: 0;
    display: none;
  }
  .pup{
    overflow: visible;
    border-radius:20px;
  .phonePopup {
    width: 540px;
    height: 600px;
    .top{
      position: relative;
      background: url(~common/imgs/combinedShapeCopy.png) no-repeat;
      background-size: 100% 100%;
      height: 253px;
      display: flex;
      align-items: center;
      justify-content: center;
      .pre{
        background: url(~common/imgs/preson.png) no-repeat;
        height: 150px;
        width: 150px;
        background-size: cover
      }
      .closed{
        width: 58px;
        height: 58px;
        background: url(~common/imgs/closed.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: -24px;
        right: -24px;
      }
    }
    .bottom{
      padding-top: 20px;
      display: flex;
      justify-content: center;
      flex-direction:column;
      p{
        display: block;
        text-align: center;
        &.name{
          font-size: 28px;
          color: #999;
        }
        &.phoneCode{
          font-size: 52px;
          color: #222;
        }
      }
      .icon{
        background: url(~common/imgs/phoneIcon.png) no-repeat;
        background-size: 100% 100%;
        width: 110px;
        height: 110px;
        margin: 20px auto;
      }
    }
    }
  }
}
.quote {
  width: 756px;
  padding: 30px;
  .row {
    padding: 10px 30px;
    input {
      padding: 10px;
      width: 680px;
      border: 2px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      &.priceIpt {
        width: 500px;
      }
    }
    .priceText {
      font-size: 16px;
      color: #3180ff;
    }
  }
  .price {
    font-size: 14px;
    i {
      color: #fb0015;
    }
    .allPrice {
      margin-left: 60px;
    }
  }
}
</style>















